<template>
  <!-- 净值分析 页面 -->
  <div class="netWorthAnalysis-page details-page app-container1">

    <pubChunk>
      <div slot="title">
        <span class="title">{{strategy_dels.strategyName}}</span>
        <el-tooltip v-if="strategy_dels.mark" popper-class="tit-tip" effect="light" :visible-arrow="false" :open-delay="500" :content="strategy_dels.mark" placement="right">
          <i class="el-icon-document fontdoc"></i>
        </el-tooltip>
      </div>
      <div slot="subtitle" style="margin-top: 8px;">
        <div class="sub-title flex">
          <div class="fromLine">
            <div class="label">所属投顾：</div>
            <div class="fromLine-content">{{strategy_dels.investName}}</div>
          </div>
          <div class="fromLine" style="margin-left: 40px;">
            <div class="label">成立日期：</div>
            <div class="fromLine-content">{{strategy_dels.makeTime | parseTime}}</div>
          </div>
        </div>
      </div>
      <div slot="headLeft">
        <el-button size="small" type="primary" @click="goContrast"><i class="iconfont icon-jia"></i>去对比</el-button>
        <el-button size="small" icon="el-icon-edit" @click="addOrUpdateHandle(strategy_dels.strategyId)">
          编辑
        </el-button>
      </div>
      <div class="head3">
        <div class="head-content flex">
          <div class="left">
            <el-row :gutter="12">
              <el-col :span="8">
                <div class="fromLine">
                  <div class="label label-line2">
                    <p>单位净值：</p>
                    <p class="fs12 tip">{{strategy_dels.detial&&strategy_dels.detial.networthTime | parseTime}}</p>
                  </div>
                  <div class="fromLine-content fzBig">{{strategy_dels.detial&&strategy_dels.detial.unitNetworth}}</div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label label-line2">
                    <p>今年以来收益率：</p>
                    <p class="fs12 tip">截止至{{strategy_dels.detial&&strategy_dels.detial.networthTime | parseTime}}</p>
                  </div>
                  <div class="fromLine-content fzBig">
                    <span v-if="strategy_dels.extend&&strategy_dels.extend[strategyId][0].incomeRate" 
                    :class="strategy_dels.extend[strategyId][0].incomeRate>0?'positiveFc1':'negativeFc1'">
                      {{strategy_dels.extend[strategyId][0].incomeRate | toFixed2}}%
                    </span>
                    <span v-else>/</span>  
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label label-line2" style="width: 138.69px;text-align: right;">
                    <p>成立以来收益率：</p>
                    <p class="fs12 tip tof">成立日期：{{strategy_dels.makeTime | parseTime}}</p>
                  </div>
                  <div class="fromLine-content fzBig">
                    <span v-if="strategy_dels.extend&&strategy_dels.extend[strategyId][7].incomeRate" 
                    :class="strategy_dels.extend[strategyId][7].incomeRate>0?'positiveFc1':'negativeFc1'">
                      {{strategy_dels.extend[strategyId][7].incomeRate | toFixed2}}%
                    </span>
                    <span v-else>/</span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12" style="margin-top: 16px;">
              <el-col :span="8">
                <div class="fromLine">
                  <div class="label" style="width: 78.69px;text-align: right;">累计净值：</div>
                  <div class="fromLine-content fw">{{strategy_dels.detial&&strategy_dels.detial.cumulativeNetworth}}</div>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label" style="width: 112px;text-align: right;">近3月收益率：</div>
                  <div class="fromLine-content fw">
                    <span v-if="strategy_dels.extend&&strategy_dels.extend[strategyId][2].incomeRate" 
                    :class="strategy_dels.extend[strategyId][2].incomeRate>0?'positiveFc1':'negativeFc1'">
                      {{strategy_dels.extend[strategyId][2].incomeRate | toFixed2}}%
                    </span>
                    <span v-else>/</span> 
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label" style="width: 138.69px;text-align: right;">年化收益率：</div>
                  <div class="fromLine-content fw">
                    <span v-if="strategy_dels.riskIndicatorsBean"
                    :class="strategy_dels.riskIndicatorsBean.annualizedIncomeRate>0?'positiveFc1':'negativeFc1'">
                      {{strategy_dels.riskIndicatorsBean.annualizedIncomeRate | toFixed2}}%
                    </span>
                    <span v-else>/</span> 
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
          <el-col :span="8">
            <div class="fromLine">
              <div class="label" style="width: 78.69px;text-align: right;">复权净值：</div>
              <div class="fromLine-content fw">{{strategy_dels.detial&&strategy_dels.detial.reinstatementNetworth}}</div>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="fromLine">
              <div class="label" style="width: 112px;text-align: right;">近6月收益率：</div>
              <div class="fromLine-content fw">
                <span v-if="strategy_dels.extend&&strategy_dels.extend[strategyId][3].incomeRate" 
                :class="strategy_dels.extend[strategyId][3].incomeRate>0?'positiveFc1':'negativeFc1'">
                  {{strategy_dels.extend[strategyId][3].incomeRate | toFixed2}}%
                </span>
                <span v-else>/</span> 
              </div>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="fromLine">
              <div class="label" style="width: 138.69px;text-align: right;">夏普比率：</div>
              <div class="fromLine-content fw">
                <span v-if="strategy_dels.riskIndicatorsBean">{{strategy_dels.riskIndicatorsBean.sharpeRate | toFixed2}}</span>
                <span v-else>/</span> 
              </div>
            </div>
          </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="8"><div style="height: 22px;"></div></el-col>
              <el-col :span="7">
                <div class="fromLine">
                  <div class="label" style="width: 112px;text-align: right;">近1年收益率：</div>
                  <div class="fromLine-content fw">
                    <span v-if="strategy_dels.extend&&strategy_dels.extend[strategyId][4].incomeRate" 
                    :class="strategy_dels.extend[strategyId][4].incomeRate>0?'positiveFc1':'negativeFc1'">
                      {{strategy_dels.extend[strategyId][4].incomeRate | toFixed2}}%
                    </span>
                    <span v-else>/</span> 
                  </div>
                </div>
              </el-col>
              <el-col :span="9">
                <div class="fromLine">
                  <div class="label" style="width: 138.69px;text-align: right;">最大回撤：</div>
                  <div class="fromLine-content fw">
                    <span v-if="strategy_dels.riskIndicatorsBean">{{strategy_dels.riskIndicatorsBean.maximumDrawdownRate}}</span>
                    <span v-else>/</span> 
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="right">
            <div class="fromLine">
              <div class="label">投资方法：</div>
              <div class="fromLine-content">{{strategy_dels.strategyMethod}}</div>
            </div>
            <div class="fromLine" style="margin-top: 5px;">
              <div class="label">投资市场：</div>
              <div class="fromLine-content">{{strategy_dels.strategyMarket}}</div>
            </div>
            <div class="fromLine" style="margin-top: 5px;">
              <div class="label">投资风格：</div>
              <div class="fromLine-content">{{strategy_dels.strategyStyle}}</div>
            </div>
            <div class="fromLine" style="margin-top: 5px;">
              <div class="label">投资标的：</div>
              <div class="fromLine-content">{{strategy_dels.strategySubject}}</div>
            </div>
          </div>
        </div>
      </div>
    </pubChunk>

    <div class="chunk operation">
      <el-form ref="formData" :inline="true" label-width="82px" :model="formData">
        <el-form-item label="对比指标：" prop="types" style="margin-bottom: 0;">
          <el-cascader
            v-model="formData.types"
            style="width: 280px;"
            placeholder="选择比较基准"
            :options="contrastOptions"
            :show-all-levels="false"
            :props="{ multiple: true, label: 'typeName', value: 'id', children: 'lists', emitPath: false }"
            collapse-tags
            filterable>
          </el-cascader>
        </el-form-item>
        <el-form-item style="margin: 0 0 0 20px">
          <el-button size="small" type="primary" @click="saveParamsHandle">应用</el-button>
          <el-button size="small" @click="refreshPage">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <pubChunk :mt="20">
      <span slot="title">历史走势图</span>
      <div slot="headLeft">
        <div class="flex wrap">
          <chart1Head ref="chart1Head" :more_chart1_nav_list2="more_chart1_nav_list2" :chartDate.sync="chart_date" :oldDate="oldDate" @sameSection="sameSectionHandle"></chart1Head>
          <el-button-group style="margin-left: 14px;">
            <el-button size="small" :type="dateFreq==1?'primary':''" :disabled="defaultDateFreq>1" @click="dateFreq=1">日频</el-button>
            <el-button size="small" :type="dateFreq==2?'primary':''" :disabled="defaultDateFreq>2" @click="dateFreq=2">周频</el-button>
            <el-button size="small" :type="dateFreq==3?'primary':''" @click="dateFreq=3">月频</el-button>
          </el-button-group>
          <el-checkbox style="margin-left: 14px;" class="flex-v-center" v-model="showBeyondIncome">显示超额曲线</el-checkbox>
        </div>
      </div>
      <chart v-if="strategy_dels.strategyName&&list_netWorthLine&&list_netWorthLine.length" :y-name="strategy_dels.strategyName" :legendStatus="legendStatus"
      :data="list_netWorthLine" :contrastIndex_obj="contrastIndex_obj" @legendStatus="legendStatusHandle" :defaultDateFreq.sync="defaultDateFreq" :dateFreq.sync="dateFreq" 
      :showBeyondIncome="showBeyondIncome" :indexNames="one_contrastOptions_list" @viewObj="viewObjHandle" :height="280" width="100%" />
      <div class="flex-vh-center borDrag" v-else-if="list_netWorthLine==null" style="height:400px;margin-top: 24px;">
        <img style="color: #666;" src="../../../assets/nodata.png" alt="">
        <div style="color: #888;font-size: 22px;">此区间无两个以上净值数据，无法绘制曲线</div>
      </div>
      <div v-else style="height:400px;margin-top: 24px;"></div>
    </pubChunk>

    <!-- 历史配置设置 -->
    <pubChunk v-if="strategyType" :mt="20">
      <span slot="title">历史配置设置</span>
      <div v-show="showChunk5" class="showHistoryChunk">
        <div v-show="strategyType==1" class="historyChunk">
          <el-table
            v-loading="listLoading"
            :data="strategyPortfolioDetials"
            stripe fit
            size="mini"
            :cell-style="{padding: '8px 0'}"
            :header-cell-style="{background:'#dcedff',color:'#32639d'}"
            style="width: 100%;margin-top:20px"
          >
            <el-table-column prop="strategyName" label="产品名称"></el-table-column>
            <el-table-column prop="marketValue" label="最初持仓市值(万元)" align="center"></el-table-column>
            <el-table-column prop="marketValue" label="实际持仓市值(万元)" align="center"></el-table-column>
            <el-table-column prop="weight" label="权重" align="center"></el-table-column>
            <el-table-column prop="" label="实际年化收益率" align="center">
              <template slot-scope="{$index}">
                <span v-if="netWorthDetialBeanList[$index]&&netWorthDetialBeanList[$index].yearAnnualizedincomeRate" :class="netWorthDetialBeanList[$index].yearAnnualizedincomeRate>=0?'positiveFc':'negativeFc'">
                  {{ netWorthDetialBeanList[$index].yearAnnualizedincomeRate }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="实际年化波动率" align="center">
              <template slot-scope="{$index}">
                <span v-if="netWorthDetialBeanList[$index]&&netWorthDetialBeanList[$index].yearAnnualfluctuationsRate">
                  {{ netWorthDetialBeanList[$index].yearAnnualfluctuationsRate }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="enterTime" label="进入日期" align="center"></el-table-column>
          </el-table>
        </div>
        <div v-show="strategyType==3" class="historyChunk">
          <historyChart v-if="netWorthDetialBeanList.length" id="historyChart" :data1="netWorthDetialBeanList" :data2="strategyPortfolio" height="300px" width="100%" />
        </div>
        <div v-show="strategyType==3" class="historyChunk">
          <el-table
            v-loading="listLoading"
            :data="strategyPortfolioDetials"
            stripe fit
            size="mini"
            :cell-style="{padding: '8px 0'}"
            :header-cell-style="{background:'#dcedff',color:'#32639d'}"
            style="width: 100%;margin-top:20px"
          >
            <el-table-column prop="strategyName" label="产品名称"></el-table-column>
            <el-table-column prop="marketValue" label="预期年化收益率" align="center">
              <template slot-scope="{$index}">
                <span v-if="netWorthDetialBeanList[$index]&&netWorthDetialBeanList[$index].yearAnnualizedincomeRate" :class="netWorthDetialBeanList[$index].yearAnnualizedincomeRate>=0?'positiveFc':'negativeFc'">
                  {{ netWorthDetialBeanList[$index].yearAnnualizedincomeRate }}%
                </span>
                <span v-else>--</span>  
              </template>
            </el-table-column>
            <el-table-column prop="marketValue" label="预期年化波动率" align="center">
              <template slot-scope="{$index}">
                <span v-if="netWorthDetialBeanList[$index]&&netWorthDetialBeanList[$index].yearAnnualfluctuationsRate">
                  {{ netWorthDetialBeanList[$index].yearAnnualfluctuationsRate }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="实际年化收益率" align="center">
              <template slot-scope="{$index}">
                <span v-if="netWorthDetialBeanList[$index]&&netWorthDetialBeanList[$index].yearAnnualizedincomeRate" :class="netWorthDetialBeanList[$index].yearAnnualizedincomeRate>=0?'positiveFc':'negativeFc'">
                  {{ netWorthDetialBeanList[$index].yearAnnualizedincomeRate }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="" label="实际年化波动率" align="center">
              <template slot-scope="{$index}">
                <span v-if="netWorthDetialBeanList[$index]&&netWorthDetialBeanList[$index].yearAnnualfluctuationsRate">
                  {{ netWorthDetialBeanList[$index].yearAnnualfluctuationsRate }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="enterTime" label="进入日期" align="center"></el-table-column>
          </el-table>
        </div>
      </div>
    </pubChunk>

    <pubChunk :mt="20">
      <span slot="title">收益风险指标</span>
      <div v-show="showChunk2" :key="list_riskIndicators_key" class="showChunk">
        <el-table
          v-loading="listLoading_riskIndicators"
          :data="list_riskIndicators"
          stripe fit
          size="mini"
          style="width: 100%;"
          :cell-style="{padding: '8px 0'}"
          :header-cell-style="{background:'#dcedff',color:'#32639d'}"
        >
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="incomeRate" label="收益率" min-width="100" align="center">
            <template slot-scope="{row}">
              <span v-if="row.incomeRate" :class="row.incomeRate>=0?'positiveFc':'negativeFc'">
                {{ row.incomeRate }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="annualizedIncomeRate" label="年化收益" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row&&scope.row.annualizedIncomeRate" :class="scope.row.annualizedIncomeRate>=0?'positiveFc':'negativeFc'">
                {{scope.row.annualizedIncomeRate}}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="annualFluctuationsRate" label="年化波动" align="center">
            <template slot-scope="{row}">
              <span v-if="row.annualFluctuationsRate!=null">{{row.annualFluctuationsRate}}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="sharpeRate" label="夏普比率" align="center">
            <template slot-scope="{row}">
              <span v-if="row.sharpeRate!=null">{{row.sharpeRate}}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="maximumDrawdownRate" label="最大回撤" align="center">
            <template slot-scope="{row}">
              <span v-if="row.maximumDrawdownRate!=null">{{row.maximumDrawdownRate}}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="calmarRate" label="卡玛比率" align="center">
            <template slot-scope="{row}">
              <span v-if="row.calmarRate!=null">{{row.calmarRate}}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="maxBackIncomDay" label="最大回撤回补期" align="center">
            <template slot-scope="{row}">
              <span v-if="row.maxBackIncomDay&&row.maxBackIncomDay>0">{{row.maxBackIncomDay}}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="maxNotByNewHightDay" label="最大不创新高天数" min-width="100" align="center">
            <template slot-scope="{row}">
              <span v-if="row.maxNotByNewHightDay">{{ row.maxNotByNewHightDay }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="investWinningRate" label="投资胜率" align="center">
            <template slot-scope="{row}">
              <span v-if="row.investWinningRate!=null">{{row.investWinningRate}}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </pubChunk>

    <pubChunk :mt="20">
      <div slot="title" class="line">
        <span class="showMonth_navList-item" :class="{'showMonth_navList-item_active': showMonth_navList_active==i}" 
        v-for="(item, i) in showMonth_navList" :key="i" @click="showMonthNavHandle(i)">
          {{item}}
        </span>
      </div>
      <div slot="headLeft" class="cutTableChart_icon">
        <div class="line">
          <div class="showMonth">
            <div class="round round1"></div>
            {{ strategy_dels.strategyName }}
          </div>
          <div class="showMonth">
            <div class="round round2"></div>
            <el-select style="width: 130px;" v-model="month_contrast" size="mini" clearable placeholder="请选择" @change="monthContrastHandle">
              <el-option
                v-for="item in one_contrastOptions_list"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="margin-left: 26px;">
          <svg-icon icon-class="zhuzhuangtu" :class="{'showMonth_cutIcon_active': showMonth_cutIcon_active==1}" @mouseenter="showMonthCutIcon(1)" />
          <svg-icon icon-class="caidan" :class="{'showMonth_cutIcon_active': showMonth_cutIcon_active==2}" @mouseenter="showMonthCutIcon(2)" />
        </div>
      </div>
      <div v-show="showChunk4" class="showChunk">
        <el-table
          v-show="showMonth_navList_active==3&&showMonth_cutIcon_active==2"
          v-loading="listLoading_netWorth"
          :data="list_showMonth"
          stripe fit
          size="mini" max-height="516"
          :cell-class-name="showMonthTableClassName"
          :cell-style="{padding: '8px 0'}"
          :header-cell-style="{background:'#dcedff',color:'#32639d'}"
          style="width: 100%;"
        >
          <el-table-column prop="0.year" label="年份" width="100" align="center"></el-table-column>
          <el-table-column :prop="`${i-1+''}`" :label="`${i}月`" align="center" v-for="i in 12" :key="i">
            <template slot-scope="scope">
              <span v-if="scope.row[i-1].monthIncrease!=null" :class="scope.row[i-1].monthIncrease>=0?'positiveFc':'negativeFc'">
                {{scope.row[i-1].monthIncrease}}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="12.monthIncrease" label="YTD" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row[12].monthIncrease!=null" :class="scope.row[12].monthIncrease>=0?'positiveFc':'negativeFc'">
                {{scope.row[12].monthIncrease}}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="showMonth_navList_active==2&&showMonth_cutIcon_active==2" v-loading="listLoading_showMonth_table1" style="min-height: 200px;">
          <el-table
            v-if="showMonth_table1.length"
            :data="showMonth_table1"
            stripe fit
            size="mini" max-height="516"
            :cell-style="{padding: '8px 0'}"
            :header-cell-style="{background:'#dcedff',color:'#32639d'}"
            style="width: 100%;"
          >
            <el-table-column prop="quarterName" label="季度/名称" width="100" align="center"></el-table-column>
            <el-table-column prop="" :label="item.definition" align="center" min-width="160" v-for="(item, i) in showMonth_table1[0].list" :key="i">
              <template slot-scope="scope">
                <span v-if="scope.row.list[i].sumPnl!=null" :class="scope.row.list[i].sumPnl>=0?'positiveFc':'negativeFc'">
                  {{scope.row.list[i].sumPnl | toFixed2}}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="showMonth_navList_active==1&&showMonth_cutIcon_active==2" v-loading="listLoading_showMonth_table2" style="min-height: 200px;">
          <el-table
            v-if="showMonth_table2.length"
            :data="showMonth_table2"
            stripe fit
            size="mini" max-height="516"
            :cell-style="{padding: '8px 0'}"
            :header-cell-style="{background:'#dcedff',color:'#32639d'}"
            style="width: 100%;"
          >
            <el-table-column prop="quarterName" label="年份/名称" width="100" align="center"></el-table-column>
            <el-table-column prop="" :label="item.definition" align="center" min-width="160" v-for="(item, i) in showMonth_table2[0].list" :key="i">
              <template slot-scope="scope">
                <span v-if="scope.row.list[i].sumPnl!=null" :class="scope.row.list[i].sumPnl>=0?'positiveFc':'negativeFc'">
                  {{scope.row.list[i].sumPnl | toFixed2}}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="showMonth_navList_active==0&&showMonth_cutIcon_active==2" v-loading="listLoading_showMonth_table3" style="min-height: 200px;">
          <el-table
            v-if="showMonth_table3.length"
            :data="showMonth_table3"
            stripe fit
            size="mini" max-height="516"
            :cell-style="{padding: '8px 0'}"
            :header-cell-style="{background:'#dcedff',color:'#32639d'}"
            style="width: 100%;"
          >
            <el-table-column prop="quarterName" label="年份/名称" width="100" align="center"></el-table-column>
            <el-table-column prop="" :label="item.definition" align="center" min-width="160" v-for="(item, i) in showMonth_table3[0].list" :key="i">
              <template slot-scope="scope">
                <span v-if="scope.row.list[i].sumPnl!=null" :class="scope.row.list[i].sumPnl>=0?'positiveFc':'negativeFc'">
                  {{scope.row.list[i].sumPnl | toFixed2}}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="month-chartContent">
          <div v-if="showMonth_cutIcon_active==1" class="mChunk1">
            <month-return-chart v-if="strategy_dels.strategyName" id="monthReturnChart" :name_contrast="name_contrast" :month_contrast="month_contrast" :chart_date="chart_date"
            :y-name="strategy_dels.strategyName" v-loading="list_monthNetWorthDistributed_loading" :data="list_monthNetWorthDistributed" :showMonth_navList_active="showMonth_navList_active" :height="400" width="100%" />
          </div>
        </div>
      </div>
    </pubChunk>

    <pubChunk v-if="strategyType" :mt="20">
      <span slot="title">产品相关性</span>
      <div slot="headLeft" class="relevance-tip">
        <!-- <div class="yellow-block"></div> 黄色代表净值条数 ≤ 30条 -->
        <div class="red-block"></div> 红色代表高相关性 ≥ 0.8
        <div class="green-block"></div> 绿色代表低相关性 ≤ 0.3
      </div>
      <div v-show="showChunk6" class="showChunk">
        <el-table
          v-loading="listLoading_riskIndicators"
          :data="relevance_list"
          fit
          size="mini"
          style="width: 100%;"
          :cell-style="{padding: '8px 0'}"
          :cell-class-name="relevanceTableRowClassName" 
          :header-cell-style="{background:'#dcedff',color:'#32639d'}"
        >
          <el-table-column type="index" width="200" label="产品名称" :index="relevanceTitleHandle"></el-table-column>
          <el-table-column :prop="`list[${i}].productRelevance`" :label="item.strategyName" v-for="(item, i) in relevance_list" :key="i" align="center"></el-table-column>
        </el-table>
      </div>
    </pubChunk>

    <pubChunk :mt="20">
      <span slot="title">历史净值</span>
      <div v-show="showChunk3" class="showChunk">
        <el-table
          v-loading="listLoading_netWorth"
          :data="list_netWorth"
          stripe fit
          size="mini"
          :cell-style="{padding: '8px 0'}"
          :header-cell-style="{background:'#dcedff',color:'#32639d'}"
          style="width: 100%;"
        >
          <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
          <!-- <el-table-column v-if="!strategyType" prop="adviserName" label="投顾名称" align="center" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column v-if="!strategyType" prop="strategyName" label="策略名称" align="center" min-width="200" show-overflow-tooltip></el-table-column> -->
          <el-table-column prop="networthTime" label="净值日期" align="center" min-width="100"></el-table-column>
          <el-table-column prop="networthValue" label="单位净值" align="center" min-width="100"></el-table-column>
          <el-table-column prop="networthValue" label="累计净值" align="center" min-width="100"></el-table-column>
          <el-table-column prop="networthValue" label="复权累计净值" align="center" min-width="100"></el-table-column>
          <el-table-column prop="pnl" label="涨跌幅" align="center" min-width="100">
            <template slot-scope="{row}">
              <span v-if="row&&row.pnl!=null" :class="Number(row.pnl)>=0?'positiveFc':'negativeFc'">
                {{row.pnl}}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>

          <!-- <el-table-column v-if="!strategyType" label="操作" width="240">
            <template slot-scope="{row}">
              <el-button class="filter-item" size="mini" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleUpdate(row)">
                编辑
              </el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <pagination v-if="total_netWorth>0" style="padding-bottom: 0;" :total="total_netWorth" :page.sync="listQuery.pageCurrent" :limit.sync="listQuery.limit" @pagination="getNetWorth" />
      </div>
    </pubChunk>

    <div style="height: 150px;"></div>

    <addOpen v-if="addOrUpdateOpenVisible" ref="addOpen" @closeOpen="refreshPage"></addOpen>
  </div>
</template>

<script>
import { 
  netWorth, strategyByid, riskIndicators, getMonthNetWorth, getMonthNetWorthLine, 
  getMonthNetWorthDistributed, findNetWorthExtendByStrategyId2, getMonthNetWorthDetial,
  queryAllIndexType, findIntersection, getStrategyQuarter, getStrategyYear, getStrategySegment, strategyType,
  getIndexRiskByIndexTypeAndTime, getMonthlyIndex, findIndexMaxDown, findTimeScopeGrowth, findStrategyDetialHead,
  getStrategyNetWorthLine, getQuarterNetWorthDistributed, getYearNetWorthDistributed, getSegmentNetWorthDistributed
} from '@/api/policyManage'
import { findPortFolioDetial, getCombinationRelevance } from '@/api/combination'
import Chart from '@/components/Charts/lineEcharts_netWorthAnalysis2.vue'
import monthReturnChart from '@/components/Charts/barEcharts_monthReturn.vue'
import historyChart from '@/components/Charts/netWorthAnalysis_historty.vue'
import Pagination from '@/components/Pagination'
import { parseTime, deepClone } from '@/utils'
import { riskIndexCalc, randomNum } from '@/utils/pro'
import addOpen from '../add.vue'
import { subMonths } from 'date-fns'
import pubChunk from '@/components/investComn/pubChunk.vue'
import chart1Head from '@/components/investComn/chart1Head.vue'

export default {
  name: 'NetWorthAnalysis',
  components: { Chart, Pagination, monthReturnChart, historyChart, pubChunk, chart1Head, addOpen },
  data() {
    return {
      addOrUpdateOpenVisible: false,

      showBeyondIncome: false, // 超额收益
      
      defaultDateFreq: undefined,
      dateFreq: undefined,
      
      contrastOptions: [],
      contrastOptions_obj: {},
      one_contrastOptions_list: [],
      contrastIndex_obj: {}, // 收益走势对比指数
      contrastIndexRisk_obj: {}, // 风险概括对比指数
      formData: {
        types: []
      },
      dict: [],

      showChunk1: true,
      showChunk2: true,
      showChunk3: true,
      showChunk4: true,
      showChunk5: true,
      showChunk6: true,

      strategyId: '',
      userId: '',
      strategyType: 0, // 区分策略和组合策略
      listLoading_netWorth: false,
      listQuery: {
        pageCurrent: 1,
        limit: 10
      },
      list_netWorth: [], //历史净值
      total_netWorth: 0,
      strategy_dels: {}, //策略详情

      chart1_nav_list: ['成立以来', '同区间', '最近一月', '最近三月', '最近半年', '最近一年', '今年以来'],
      cns_active: 0,
      more_chart1_nav_list1: ['最近两年', '最近三年', '最近五年'],
      more_chart1_nav_list2: [],
      moreVisible: false,
      moreTxt: '更多',

      listLoading_riskIndicators: false,
      list_riskIndicators: [], // 收益风险指标
      _list_riskIndicators: [], // 保存基础 收益风险指标
      list_riskIndicators_key: 1,
      riskIndicators_columnLabel: {
        'annualizedIncomeRate': '年化收益',
        'annualFluctuationsRate': '年化波动',
        'sharpeRate': '夏普比率',
        'maximumDrawdownRate': '最大回撤',
        'calmarRate': '卡玛比率',
        'maxBackIncomDay': '最大回补天数',
        'investWinningRate': '投资胜率'
      },
      add_column_list: [],

      list_netWorthLine: [], //净值曲线
      _chart_date: [],
      chart_date: [],
      oldDate: [],
      sameSection: false,

      // todo 月度表现
      showMonth_navList: ['区间收益','年度收益','季度收益','月度收益'],
      combTreeValue: '',
      showMonth_navList_active: 0,
      showMonth_cutIcon_active: 2,
      // 季度收益
      listLoading_showMonth_table1: false,
      listLoading_showMonth_table2: false,
      listLoading_showMonth_table3: false,
      list_monthNetWorthDistributed_loading: false,
      showMonth_table1: [],
      showMonth_table2: [],
      showMonth_table3: [],
      old_month_contrast1: undefined, // 记录所选指数
      old_month_contrast2: undefined, // 记录所选指数
      old_month_contrast3: undefined, // 记录所选指数
      listLoading_monthNetWorth: false,
      month_contrast: undefined,
      name_contrast: '',
      list_showMonth: [],
      _list_showMonth: [],
      monthChartBtn: 0,
      list_showMonth_profit: [],
      list_showMonth_key: 0,
      list_monthNetWorthLine: [], // 收益分布
      findNetWorthExtendByStrategyId2_loading: false, // 收益分布 列表loading
      list_monthNetWorthDistributed: [], // 月度回报 echart
      list_table_getMonthNetWorthDetial: [], // 月度回报 列表
      getMonthNetWorthDetial_loading: false, // 月度回报 列表loading
      monthNetWorthDetial_listQuery: { // 月度回报 分页
        pageCurrent: 1,
        limit: 10
      },
      monthNetWorthDetial_total: 0,

      // 风险概括
      risk_contrast: '沪深300',
      listLoading_risk: false,

      // 策略组合
      listLoading: false,
      portfolioId: undefined,
      strategyPortfolio: {}, // 历史配置设置用
      strategyPortfolioDetials: [], 
      portfolioNetWorthBean: [], // 123..月
      netWorthDetialBeanList: [], // 子策略数据

      relevance_list: [],

      legendStatus: {}, // 记录历史走势图图例状态

      chart1List: []

    }
  },
  watch: {
    'formData.types': {
      handler(newVal, oldVal) {
        if(newVal.length > 5 || newVal.length == 0) {
          this.$message({
            message: newVal.length ? '最多选择5个对比指标' : '最少选择1个对比指标', 
            type: 'warning',
            duration: 2000
          })
          this.$nextTick(() => {
            this.formData.types = oldVal
          })
        }else {
          if(Object.keys(this.contrastOptions_obj).length) {
            this.one_contrastOptions_list = []
            newVal.forEach(item => {
              this.one_contrastOptions_list.push({
                id: item,
                name: this.contrastOptions_obj[item]
              })
            })
          }
        }
      },
      deep: true
    },
    month_contrast(val) {
      if(val) {
        this.name_contrast = this.contrastOptions_obj[val] // 月度表现头部修改
      }
      this.showMonthNavHandle(this.showMonth_navList_active)
    },
    chart_date: {
      handler(date, oldDate) {
        if(oldDate.length !== 0) {
          this.list_netWorthLine = []
          this.getnetWorthLine(date[0], date[1])
        }
      }
    },
    listLoading_riskIndicators(val) {
      if(!val) {
        this.list_riskIndicators = this.riskRecursionHandle(this.chart1List, this.list_riskIndicators)
        this.list_riskIndicators_key++
      }
    }
  },
  created() {
    this.strategyId = this.$route.params && this.$route.params.id  // 多开标签
    this.userId = this.$route.query.userId
    this.strategyType = this.$route.query.strategyType
    
    if(!this.strategyType) { // 策略
      this.findStrategyDetialHead()
      Promise.all([this.getStrategyByid(this.strategyId)]).then(res => {
        this.findNetWorthExtendByStrategyId2(this.strategyId)
      })
    }else { // 组合
      this.portfolioId = this.$route.query.portfolioId
      Promise.all([this.findPortFolioDetial(this.portfolioId)]).then(res => {
        this.findIndexByIndexTypeAndIndexTime(res[0][0], res[0][1], this.formData.types)
        this.findIndexMaxDown(res[0][0], res[0][1], this.formData.types)
        this.findNetWorthExtendByStrategyId2(this.strategyId)
        this.getCombinationRelevance(this.portfolioId, this.strategy_dels.strategyName)
      })
    }
    
    this.getNetWorth()
    this.queryAllIndexType()
    this.getMonthNetWorth(this.strategyId)
    this.getMonthNetWorthLine(this.strategyId)
    this.getMonthNetWorthDistributed(this.strategyId)
    this.getMonthNetWorthDetial(this.strategyId)
    this.getStrategyType()
  },
  methods: {
    goContrast() {
      const res_list = [{
        id: this.strategyId,
        name: this.strategy_dels.strategyName,
        type: 1
      }]
      const id = randomNum(6)
      this.$router.push({
        path: `/policyManage/contrast/${id}`,
        query: {
          list: JSON.stringify(res_list),
          one: 1
        }
      })
    },
    sameSectionHandle(val) {
      this.sameSection = val
    },
    viewObjHandle(data) {
      this.chart1List = riskIndexCalc(data)
      
      if(this.list_riskIndicators.length>=2) {
        this.list_riskIndicators = this.riskRecursionHandle(this.chart1List, this.list_riskIndicators)
        this.list_riskIndicators_key++
      }else {
        setTimeout(() => {
          this.list_riskIndicators = this.riskRecursionHandle(this.chart1List, this.list_riskIndicators)
          this.list_riskIndicators_key++
        }, 1500)
      }
    },
    riskRecursionHandle(resList, list) {
      list.map((items, i) => {
        const resList_i = resList.findIndex(item => item.name==items.name)
        if(resList_i!=-1) {
          const res = resList[resList_i]
          list[i] = {
            children: items.children,
            rowKey: items.rowKey,
            weight: items.weight,
            initMoney: items.initMoney,
            nominalAmount: items.nominalAmount,
            ...res
          }
        }else if(items.children) { // 分类
          items.children.forEach(_ => {
            list[i] = {
              annualFluctuationsRate: '--',
              sharpeRate: '--',
              maxBackIncomDay: '--',
              maximumDrawdownRate: '--',
              calmarRate: '--',
              investWinningRate: '--',
              ...list[i]
            }
          })
        }
        if(items.children) this.riskRecursionHandle(resList, items.children)
      })
      // list[0].nominalAmount = this.nominalAmount
      return list
    },
    showMonthCutIcon(i) {
      this.showMonth_cutIcon_active = i
    },
    // 切换月度表现nav
    showMonthNavHandle(i) {
      this.showMonth_navList_active = i
      switch (i) {
        case 0:
          if((!this.showMonth_table3.length) || this.old_month_contrast3!=this.month_contrast) {
            this.old_month_contrast3 = this.month_contrast
            this.getStrategySegment()
          }
          this.getSegmentNetWorthDistributed()
          break
        case 1:
          if((!this.showMonth_table2.length) || this.old_month_contrast2!=this.month_contrast) {
            this.old_month_contrast2 = this.month_contrast
            this.getStrategyYear()
          }
          this.getYearNetWorthDistributed()
          break
        case 2:
          if((!this.showMonth_table1.length) || this.old_month_contrast1!=this.month_contrast) {
            this.old_month_contrast1 = this.month_contrast
            this.getStrategyQuarter()
          }
          this.getQuarterNetWorthDistributed()
          break
        case 3:
          this.getMonthNetWorthDistributed(this.strategyId)
          break
        default: break
      }
    },
    getStrategyQuarter() {
      this.listLoading_showMonth_table1 = true
      getStrategyQuarter({
        strategyId: this.strategyId,
        indexTypes: this.month_contrast ? [this.month_contrast]: null,
        indexNames: this.name_contrast ? [this.name_contrast]: null
      }).then(res => {
        this.listLoading_showMonth_table1 = false
        console.log('季度收益', res)
        this.showMonth_table1 = res.body
      })
    },
    getStrategyYear() {
      this.listLoading_showMonth_table2 = true
      getStrategyYear({
        strategyId: this.strategyId,
        indexTypes: this.month_contrast ? [this.month_contrast]: null,
        indexNames: this.name_contrast ? [this.name_contrast]: null
      }).then(res => {
        this.listLoading_showMonth_table2 = false
        console.log('年度收益', res)
        this.showMonth_table2 = res.body
      })
    },
    getStrategySegment() {
      this.listLoading_showMonth_table3 = true
      getStrategySegment({
        strategyId: this.strategyId,
        indexTypes: this.month_contrast ? [this.month_contrast]: null,
        indexNames: this.name_contrast ? [this.name_contrast]: null,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1]
      }).then(res => {
        this.listLoading_showMonth_table3 = false
        console.log('区间收益', res)
        this.showMonth_table3 = res.body
      })
    },
    legendStatusHandle(obj) {
      this.legendStatus = obj
    },
    pickerChange() {
      this.cns_active = null
    },
    cnsHandle(i, txt) {
      if(this.cns_active == i) {
        return
      }
      this.cns_active = i
      this.moreVisible = false
      txt ? this.moreTxt = txt : this.moreTxt = '更多'
      switch (i) {
        case 0:
          this.chart_date = deepClone(this._chart_date)
          break
        case 1:
          this.findIntersection(this._chart_date[0], this._chart_date[1])
          break
        case 2:
          this.chart_date = [parseTime(subMonths(this._chart_date[1], 1)), this._chart_date[1]]
          break
        case 3:
          this.chart_date = [parseTime(subMonths(this._chart_date[1], 3)), this._chart_date[1]]
          break
        case 4:
          this.chart_date = [parseTime(subMonths(this._chart_date[1], 6)), this._chart_date[1]]
          break
        case 5:
          this.chart_date = [parseTime(subMonths(this._chart_date[1], 12)), this._chart_date[1]]
          break
        case 6:
          this.chart_date = [((new Date(this._chart_date[1]).getFullYear()-1)+'-12-31'), this._chart_date[1]]
          break
        case 100:
          this.chart_date = [parseTime(subMonths(this._chart_date[1], 24)), this._chart_date[1]]
          break
        case 101:
          this.chart_date = [parseTime(subMonths(this._chart_date[1], 36)), this._chart_date[1]]
          break
        case 102:
          this.chart_date = [parseTime(subMonths(this._chart_date[1], 60)), this._chart_date[1]]
          break
        default:
          if(txt&&i>999) {
            this.chart_date = [(txt.slice(0, 4)-1)+'-12-31', (Number(txt.slice(0, 4)))+'-12-31']
          }
        break
      }
    },
    showMonthTableClassName({ row, columnIndex }) {
      if(columnIndex === 0 && row[12].strategyId) {
        return 'showMonthyearBorder0'
      }else if(columnIndex === 0) {
        return 'showMonthyearBorder1'
      }
    },
    tableRowClassName({ columnIndex }) {
      if (columnIndex === 0) {
        return 'title-row'
      } else if (columnIndex === 1) {
        return 'cell-row-0'
      } else if (columnIndex === 2) {
        return 'cell-row-1'
      } else if (columnIndex === 3) {
        return 'cell-row-2'
      } else if (columnIndex === 4) {
        return 'cell-row-3'
      } else if (columnIndex === 5) {
        return 'cell-row-4'
      } else if (columnIndex === 6) {
        return 'cell-row-5'
      } else if (columnIndex === 7) {
        return 'cell-row-6'
      }
      return ''
    },
    relevanceTableRowClassName({ row, rowIndex, columnIndex }) {
      if(columnIndex === 0) {
        return 'title-row'
      }else if(columnIndex-1 === rowIndex) {
        return 'title-row-gray'
      }else if(columnIndex>0 && row.list[columnIndex-1].productRelevance<=0.3) {
        return 'cell-row-low'
      }else if(columnIndex>0 && row.list[columnIndex-1].productRelevance>=0.8) {
        return 'cell-row-high'
      } 
      return ''
    },
    titleHandle(i) {
      const key_list = Object.keys(this.riskIndicators_columnLabel)
      return this.riskIndicators_columnLabel[key_list[i]]
    },
    relevanceTitleHandle(i) {
      return this.relevance_list[i].strategyName
    },
    handleUpdate(row) {},
    //  风险指标
    getriskIndicators() {
      riskIndicators({
        strategyId: this.strategyId
      }).then(res => {
        console.log('风险指标', res)
        this.list_riskIndicators.push(res.body)
        this.list_riskIndicators[0].name = this.strategy_dels.strategyName
        this.getIndexRiskByIndexTypeAndTime(this.formData.types)
      })
    },
    // 风险指标 对比 
    getIndexRiskByIndexTypeAndTime(indexType) {
      this.listLoading_riskIndicators = true
      getIndexRiskByIndexTypeAndTime({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then(res => {
        console.log('风险指标 对比', res)
        this.listLoading_riskIndicators = false
        this.list_riskIndicators = [this.list_riskIndicators[0]]
        Object.keys(res.body).forEach(index => {
          const name = this.contrastOptions_obj[index]
          this.list_riskIndicators.push({
            name,
            ...res.body[index]
          })
        })
      })
    },
    findPortFolioDetial(portfolioId) { // 详情(组合策略)
      return new Promise(resolve => {
        this.listLoading = true
        this.listLoading_riskIndicators = true
        this.listLoading_risk = true
        findPortFolioDetial({
          portfolioId
        }).then(res => {
          this.listLoading = false
          this.strategy_dels = {
            strategyName: res.body.strategyPortfolio.portfolioName,
            ...res.body.strategyPortfolio,
            netWorthValue: res.body.netWorthValue,
          }
          this.portfolioNetWorthBean = res.body.portfolioNetWorthBean[this.strategyId]
          this.strategyPortfolioDetials = res.body.strategyPortfolioDetials
          this.strategyPortfolio = res.body.strategyPortfolio
          this.netWorthDetialBeanList = res.body.netWorthDetialBeanList
          this.$set(this.formData, 'types', [res.body.strategyPortfolio.portfolioCompareIndex]) // 等待对比指数树数据
          console.log('组合策略详情', this.strategy_dels)
          const start_date = parseTime(res.body.strategyPortfolio.netWorthStartTime, '{y}-{m}-{d}')
          const end_date = parseTime(res.body.strategyPortfolio.netWorthEndTime, '{y}-{m}-{d}')
          this.chart_date = [start_date, end_date]
          resolve(this.chart_date)
          this.getriskIndicators() // 风险指标
          setTimeout(() => {
            this.getIndexRiskByIndexTypeAndTime(this.formData.types) // 风险指标 对比
          }, 500)
          this.getnetWorthLine(start_date, end_date) // 历史走势图 数据
        })  
      })
    },
    getStrategyByid(strategyId) { // 详情
      return new Promise((resolve, reject) => {
        this.listLoading = true
        this.listLoading_riskIndicators = true
        this.listLoading_risk = true
        strategyByid({
          strategyId
        }).then(res => {
          this.listLoading = false
          console.log('策略详情', res)

          // 多开标签 设置
          this.tempRoute = Object.assign({}, this.$route)
          this.$setTagsViewTitle(this.tempRoute, `净值分析[策略管理]-${res.body.strategyInfoVo.strategyName}`)
          document.title = `净值分析[策略管理]-${res.body.strategyInfoVo.strategyName}`

          const start_date = parseTime(res.body.strategyInfoVo.makeTime, '{y}-{m}-{d}')
          const end_date = parseTime(res.body.netWorthDetialBean.networthTime)
          this.chart_date = [start_date, end_date]
          this.oldDate = deepClone(this.chart_date)
          this._chart_date = [start_date, end_date]
          this.strategy_dels = {
            ...this.strategy_dels,
            ...res.body.strategyInfoVo,
            riskIndicatorsBean: res.body.riskIndicatorsBean
          }
          this.$set(this.formData, 'types', res.body.strategyInfoVo.investIndex)
          resolve(this.chart_date)
          // 更多--年度
          let year0 = Number(this._chart_date[0].slice(0, 4))
          const year1 = Number(this._chart_date[1].slice(0, 4))
          this.more_chart1_nav_list2 = []
          while (year0<=year1) {
            this.more_chart1_nav_list2.push(year0+'年度')
            year0++
          }
          this.getriskIndicators() // 风险指标
          
          this.getStrategySegment() // 区间收益
          this.getSegmentNetWorthDistributed()
          this.getStrategyYear()
          this.getStrategyQuarter()
          setTimeout(() => {
            this.getnetWorthLine(start_date, end_date) // 历史走势图 数据
          }, 500)
        }).catch(() => {
          reject(this.chart_date)
        })
      })
    },
    // 指数月度表现
    monthContrastHandle(indexType) {
      if(indexType) {
        if(this.month_contrast) this.findTimeScopeGrowth(this.month_contrast)
        getMonthlyIndex({
          indexType,
          startTime: this.chart_date[0],
          endTime: this.chart_date[1]
        }).then(res => {
          console.log('指数月度表现', res)
          Object.keys(res.body).forEach(key => {
            const items = res.body[key]
            items.forEach(item => {
              if(item.indexTime) {
                item.month = Number(item.indexTime.slice(5))
              }else {
                item.month = 13
              }
              item.monthIncrease = item.indexGrowthRate==null ? null : Number(item.indexGrowthRate)
            })
          })
          const list = Object.keys(res.body).map(function(i) { return res.body[i] })
          const new_list = deepClone(list)
          list.forEach((items, index) => {
            if(items.length<13) {
              new_list[index] = []
              const year = items[0].year
              for(let i=0; i<13; i++) {
                if(items[i]&&items[i].month != i+1) {
                  if(!new_list[index][i]) {
                    new_list[index][i] = {
                      year: items[i].year
                    }
                  }
                  new_list[index][items[i].month-1] = deepClone(items[i])
                }else if(!new_list[index][i]) {
                  if(items[i]&&items[i].month == i+1) {
                    new_list[index][items[i].month-1] = deepClone(items[i])
                  }else {
                    new_list[index][i] = {
                      year
                    }
                  }
                }
              }
            }
          })
          this.list_showMonth = deepClone(this._list_showMonth)
          const save_list_showMonth = deepClone(this._list_showMonth)

          if(new_list.length>this.list_showMonth) {
            new_list.forEach(element => {
              this.list_showMonth.forEach((item, i) => {
                if(element[0].year == item[0].year) {
                  save_list_showMonth.splice(i+1, 0, element)
                }
              })
            })
          }else {
            let num = 0 // 插入之后_list_showMonth数组变长，需计数
            this.list_showMonth.forEach((element, n) => {
              new_list.forEach((item, i) => {
                if(element[0].year == item[0].year) {
                  save_list_showMonth.splice(n+1+num, 0, item)
                  num++
                }
              })
            })
          }
          this.list_showMonth = deepClone(save_list_showMonth)
        })
      }else { // 删除对标指数
        this.name_contrast = ''
        this.month_contrast = undefined
        this.list_showMonth = [] // 月度表现列表数据
        this.list_showMonth_profit = [] // 收益分布列表数据
        this.getMonthNetWorth(this.strategyId)
        this.findNetWorthExtendByStrategyId2(this.strategyId)
      }
    },
    // 历史月度表现
    getMonthNetWorth(strategyId) {
      this.listLoading_monthNetWorth = true
      getMonthNetWorth({
        strategyId
      }).then(res => {
        this.listLoading_monthNetWorth = false
        const list = Object.keys(res.body).map(function(i) { return res.body[i] })
        const new_list = deepClone(list)
        console.log('历史月度表现', list)
        list.forEach((items, index) => {
          items.map((el, j) => {
            el.growthRate = Number(el.monthIncrease)
            new_list[index][j].growthRate = Number(el.monthIncrease)
          })
          if(items.length<13) {
            new_list[index] = []
            const year = items[0].year
            for(let i=0; i<13; i++) {
              if(items[i]&&items[i].month != i+1) {
                if(!new_list[index][i]) {
                  new_list[index][i] = {
                    year: items[i].year
                  }
                }
                new_list[index][items[i].month-1] = deepClone(items[i])
              }else if(!new_list[index][i]) {
                if(items[i]&&items[i].month == i+1) {
                  new_list[index][items[i].month-1] = deepClone(items[i])
                }else {
                  new_list[index][i] = {
                    year
                  }
                }
              }
            }
          }
        })
        this.list_showMonth = new_list
        this._list_showMonth = deepClone(new_list)
        console.log('历史月度表现 修改........', this.list_showMonth)
      })
    },
    findIntersection(startTime, endTime) {
      findIntersection({
        userId: this.userId,
        strategyId: this.strategyId,
        startTime,
        endTime,
        indexTypes: this.formData.types
      }).then(res => {
        console.log('同区间净值曲线', res)
        this.list_netWorthLine = res.body
      }).catch(() => {
        this.list_netWorthLine = null
      })
    },
    // 收益曲线
    getnetWorthLine(startDate, endDate) {
      getStrategyNetWorthLine({
        userId: this.userId,
        strategyId: this.strategyId,
        startDate,
        endDate,
        indexTypes: this.formData.types
      }).then(res => {
        console.log('净值曲线', res)
        this.list_netWorthLine = res.body
      }).catch(() => {
        this.list_netWorthLine = null
      })
    },
    getNetWorth() {
      this.listLoading_netWorth = true
      netWorth({
        userId: this.userId,
        strategyId: this.strategyId,
        ...this.listQuery
      }).then(res => {
        this.listLoading_netWorth = false
        console.log('历史净值', res)
        this.list_netWorth = res.body
        this.total_netWorth = res.count
      })
    },
    // 对比指标 选择树
    queryAllIndexType() {
      queryAllIndexType().then(res => { 
        console.log('对比指标', res)
        res.body.forEach((item, i) => {
          res.body[i].typeName = item.modelName
        })
        this.contrastOptions = res.body
        res.body.forEach(items => {
          items.lists.forEach(item => {
            this.contrastOptions_obj[item.id] = item.typeName
          })
        })
        this.formData.types.forEach(item => {
          this.one_contrastOptions_list.push({
            id: item,
            name: this.contrastOptions_obj[item]
          })
        })
        // this.month_contrast = this.formData.types[0]
      })
    },
    // 收益分布
    getMonthNetWorthLine(strategyId) {
      getMonthNetWorthLine({
        strategyId
      }).then(res => {
        console.log('收益分布', res)
        this.list_monthNetWorthLine = res.body
      })
    },
    headTail(list) {
      list.unshift(list[list.length-1])
      list.splice(list.length-1, 1)
    },
    // 收益分布 列表
    findNetWorthExtendByStrategyId2(strategyId) {
      this.findNetWorthExtendByStrategyId2_loading = true
      findNetWorthExtendByStrategyId2({
        strategyId
      }).then(res => {
        console.log('收益分布 列表', res)
        this.findNetWorthExtendByStrategyId2_loading = false
        this.headTail(res.body)
        this.list_showMonth_profit = res.body
      })
    },
    // 指数 收益分布 列表
    findTimeScopeGrowth(indexType) {
      findTimeScopeGrowth({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then(res => {
        console.log('对比指数 收益分布 列表', res)
        this.headTail(res.body)
        this.list_showMonth_profit.forEach((item, i) => {
          item.growth = res.body[i].growth
        })
        this.list_showMonth_key++
      })
    },
    // 月度回报
    getMonthNetWorthDistributed(strategyId) {
      getMonthNetWorthDistributed({
        strategyId
      }).then(res => {
        console.log('月度回报', res)
        this.list_monthNetWorthDistributed = res.body
      })
    },
    // 区间收益-季度-柱状图
    getQuarterNetWorthDistributed() {
      this.list_monthNetWorthDistributed_loading = true
      getQuarterNetWorthDistributed({
        strategyId: this.strategyId,
        indexType: this.month_contrast
      }).then(res => {
        console.log('区间收益-季度-柱状图', res)
        this.list_monthNetWorthDistributed_loading = false
        this.list_monthNetWorthDistributed = res.body
      })
    },
    // 区间收益-年度-柱状图
    getYearNetWorthDistributed() {
      this.list_monthNetWorthDistributed_loading = true
      getYearNetWorthDistributed({
        strategyId: this.strategyId,
        indexType: this.month_contrast
      }).then(res => {
        console.log('区间收益-年度-柱状图', res)
        this.list_monthNetWorthDistributed_loading = false
        this.list_monthNetWorthDistributed = res.body
      })
    },
    // 区间收益-区间-柱状图
    getSegmentNetWorthDistributed() {
      this.list_monthNetWorthDistributed_loading = true
      getSegmentNetWorthDistributed({
        strategyId: this.strategyId,
        indexType: this.month_contrast
      }).then(res => {
        console.log('区间收益-区间-柱状图', res)
        this.list_monthNetWorthDistributed_loading = false
        this.list_monthNetWorthDistributed = res.body
      })
    },
    // 月度回报 列表
    getMonthNetWorthDetial(strategyId) {
      this.getMonthNetWorthDetial_loading = true
      getMonthNetWorthDetial({
        strategyId,
        ...this.monthNetWorthDetial_listQuery
      }).then(res => {
        console.log('月度回报 列表', res)
        this.getMonthNetWorthDetial_loading = false
        this.list_table_getMonthNetWorthDetial = res.body
        this.monthNetWorthDetial_total = res.count
      })
    },
    // 应用
    saveParamsHandle() {
      this.getIndexRiskByIndexTypeAndTime(this.formData.types)
      if(this.cns_active!=1) {
        this.getnetWorthLine(this.chart_date[0], this.chart_date[1])
      }else {
        this.findIntersection(this._chart_date[0], this._chart_date[1])
      }
    },
    resetForm(ref) {
      this.$refs[ref].resetFields()
      this.contrastIndex_obj = {}
      this.contrastIndexRisk_obj = {}
    },
    refreshPage() {
      location.reload()
    },
    // 对比指数风险概览 （指数的最大回撤）
    findIndexMaxDown(startTime, endTime, indexType) {
      findIndexMaxDown({
        startTime,
        endTime,
        indexType
      }).then(res => {
        console.log('获取对比指数风险概览', res)
        this.contrastIndexRisk_obj = {}
        Object.keys(res.body).forEach(key => {
          const item = res.body[key]
          const _key = this.contrastOptions_obj[key]
          this.contrastIndexRisk_obj[_key] = item
        })
      })
    },
    // 策略详情接口-头部数据
    findStrategyDetialHead() {
      findStrategyDetialHead({
        strategyId: this.strategyId
      }).then(res => {
        this.strategy_dels = {
          ...this.strategy_dels,
          ...res.body
        }
        console.log('策略详情接口-头部数据', this.strategy_dels)
      })
    },
    // 产品相关性
    getCombinationRelevance(portfolioId, portfolioName) {
      getCombinationRelevance({
        portfolioId, 
        portfolioName
      }).then(res => {
        this.relevance_list = res.body
      })
    },
    addOrUpdateHandle(strategyId) {
      this.addOrUpdateOpenVisible = true
      this.$nextTick(() => {
        this.$refs.addOpen.init(strategyId, this.dict, this.userId)
      })
    },
    getStrategyType() {
      strategyType().then(res => {
        this.dict = res.body
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.netWorthAnalysis-page {
  position: relative;
  .head3 {
    min-width: 1140px;
    font-family: PingFangSC-Medium, PingFang SC;
    .fzBig { font-size: 36px; font-weight: bold; margin-top: 10px; }
  }
  .fromLine {
    display: flex;
    line-height: 28px;
    .label { min-width: 0px; }
    .fromLine-content { min-width: 0; }
    .label-line2 {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .tip {
        line-height: 12px;
        padding-right: 12px;
      }
    }
  }
  .title {
    font-size: 26px;
    font-weight: 500;
    .fontdoc { font-size: 22px; color: #678EB3; cursor: pointer; margin-left: 6px; }
  }
  .sub-title {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
  }
  .head-content {
    margin-top: 10px;
    .left { width: 85%; }
    .right { width: 15%; }
  }
  .operation {
    display: flex;
    align-items: center;
    margin-top: 20px;
    padding: 10px 24px;
    background: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
  }
  .column {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-top: 30px;
    cursor: pointer;
    user-select: none;
    .el-icon { color: #4F95DD; font-weight: bold; margin-left: 6px; }
    .openChunk { transform: rotate(90deg); }
    &::before {
      display: inline-block;
      content: '';
      width: 6px;
      height: 26px;
      background: #42b983;
      margin-right: 6px;
    }
  }
  .showHistoryChunk {
    display: flex;
    .historyChunk {
      // flex: 1;
      width: 50%;
      &:nth-child(1) { width: 100%; }
    }
  }
  .line {
    display: flex;
    .showMonth {
      display: flex;
      align-items: center;
      & + .showMonth {margin-left: 15px;}
      .round {width: 10px;height: 10px;border-radius: 50%;margin-right: 5px;}
      .round1 {background: #e16757;}
      .round2 {background: #78b2eb;}
    }
    .chart1-nav {
      span {
        padding: 4.5px 7px;
        cursor: pointer;
        & + span { margin-left: 10px; }
      }
      .cns-active {
        color: #e1322d;
        background-color: #fcf5f5;
      }
    }
  }
  .month-chartContent {
    display: flex;
    .mChunk {width: 50%;}
  }
  ::v-deep .el-table {
    .title-row {
      background: #dcedff !important;
    }
    .cell-row-0 {
      background: #FFF7F7 !important;
    }
    .cell-row-1 {
      background: #FFFCF5 !important;
    }
    .cell-row-2 {
      background: #FFFBFD !important;
    }
    .cell-row-3 {
      background: #FAFFFB !important;
    }
    .cell-row-4 {
      background: #FFFCFC !important;
    }
    .cell-row-5 {
      background: #F9FDFF !important;
    }
    .cell-row-6 {
      background: #FDFBFE !important;
    }
    .title-row-gray {
      background: #e4e3e3 !important;
    }
    .cell-row-low {
      background: #7bdb91 !important;
    }
    .cell-row-high {
      background: #fc7486 !important;
    }

    // 历史月度表现
    .showMonthyearBorder0 {
      border-right: 2px solid #e16757;
    }
    .showMonthyearBorder1 {
      border-right: 2px solid #78b2eb;
    }
  }

  .relevance-tip {
    line-height: 12px;
    display: flex;
    align-items: center;
    color: #666;
    font-size: 12px;
    margin-top: 10px;
    .yellow-block { width: 12px; height: 12px; background: #fcaa4d; }
    .red-block { width: 12px; height: 12px; background: #fc7486; margin-left: 6px; }
    .green-block { width: 12px; height: 12px; background: #7bdb91; margin-left: 6px; }
  }
}

.app-container1 {
  padding: 20px;
  min-height: 100vh;
  background: #F0F2F5;
}
.icon-jia {
  font-size: 12px;
  margin-right: 6px;
}
</style>

